<template>
  <div>
    <div class="gva-search-box icey_bg">
      <el-form ref="searchForm" :model="searchForm">
        <el-row>
          <el-col :span="4">
            <el-form-item prop="typeField" label="漏洞类型">
              <el-select filterable v-model="searchForm.typeField" placeholder="状态" style=" width: 120px" allowClear>
                <el-option v-for="item in vulType" :key="item.name" :value="item.name">{{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="productField" label="影响类型">
              <el-select filterable v-model="searchForm.productField" placeholder="请选择" value-key="name"
                         style="width: 200px">
                <el-option v-for="item in productList" :key="item.id" :value="item" :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="search" label="模糊查询">
              <el-input v-model="searchForm.search" placeholder="请输入模糊查询" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-button type="primary" @click="searchVul" icon="Search" style="margin-left: 10px">
              查询
            </el-button>
            <el-button @click="resetForm()">Reset</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click=" vulDialogVisible = true; vulId = -1" icon="Plus" round
                   style="margin-left: 10px">
          新建描述
        </el-button>
      </div>
      <div>
        <el-table :data="tableData">
          <el-table-column align="left" label="序号" min-width="40" prop="id" sortable="custom">
          </el-table-column>
          <el-table-column align="left" label="漏洞名称" min-width="150" prop="name_zh" />
          <el-table-column align="left" label="影响组件" min-width="60" prop="webapp_name"></el-table-column>
          <el-table-column align="left" label="漏洞类型" min-width="70" prop="category" />
          <el-table-column align="left" label="cve编号" min-width="100" prop="cve" />
          <!--          <el-table-column align="left" label="cnnvd编号" min-width="150" prop="cnnvd" sortable="custom"/>-->
          <!--          <el-table-column align="left" label="修复建议" min-width="150" prop="suggestion" sortable="custom"/>-->
          <el-table-column label="漏洞等级" min-width="60" prop="severity" >
            <template #default="scope">
              <div v-if="scope.row.severity == 'info'">
                <el-tag
                    class="mx-1"
                    type="success"
                    effect="light">
                  info
                </el-tag>
              </div>
              <div v-if="scope.row.severity == 'low'">
                <el-tag
                    class="mx-1"
                    type="info"
                    effect="light">
                  low
                </el-tag>
              </div>
              <div v-if="scope.row.severity == 'middle'">
                <el-tag
                    class="mx-1"
                    type="warning"
                    effect="light">
                  middle
                </el-tag>
              </div>
              <div v-if="scope.row.severity == 'high'">
                <el-tag
                    class="mx-1"
                    type="danger"
                    effect="light">
                  high
                </el-tag>
              </div>

            </template>
          </el-table-column>
          <el-table-column align="left" label="漏洞语言" min-width="60" prop="language" />
          <!--          <el-table-column align="left" label="上传者" min-width="150" prop="writer_name" sortable="custom"/>-->

          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                  icon="edit"
                  size="small"
                  type="primary"
                  link
                  @click="editVulFunc(scope.row)"
              >编辑
              </el-button>
              <el-button
                  icon="delete"
                  size="small"
                  type="primary"
                  link
                  @click="deleteVulFunc(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="[15, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
          />
        </div>
      </div>
      <el-dialog v-model="vulDialogVisible"
                 :title="vulId != -1?'漏洞描述详情':'新建漏洞描述'"
                 :fullscreen="true"
                 destroy-on-close="true">
        <template #default>
          <vul-info :vul-id="vulId" @vulFlag="flagUpdate"></vul-info>
        </template>
<!--        <template #footer>-->
<!--        </template>-->
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {deleteVul, getVulBasic, getVulList} from "@/api/my/loophole/vul";
import {getProductList} from "@/api/my/loophole/webapp";
import {ElMessage} from "element-plus";

import VulInfo from "@/view/my/vulnerabilityModule/vnlnerablilitise/vulInfo.vue";

export default {
  name: 'vnlnerablilitise',
  components: {VulInfo},
  data() {
    return {
      searchForm: {
        typeField: '',
        productField: null,
        search: '',
      },
      vulType: [],
      productList: [],
      pageSize: 15,
      page: 1,
      total: 0,
      tableData: [],
      vulDialogVisible: false,
      vulId: -1,
    }
  },
  mounted() {
    let vul = window.localStorage.getItem("vul")
    if (vul == null) {
      getVulBasic().then(res => {
        console.log(res)
        window.localStorage.setItem('vul', JSON.stringify(res.data))
      });
    }
    this.setVulBasic()
    this.searchVul()
  },
  methods: {
    setVulBasic() {
      this.vulType = JSON.parse(window.localStorage.getItem("vul")).VulType
      this.searchProducts()
    },
    searchProducts() {
      getProductList().then(rep => {
        console.log(rep)
        this.productList = rep.data.data
        window.localStorage.setItem('productList', JSON.stringify(rep.data.data))
      })
    },
    searchVul() {
      getVulList({
        typeField: this.searchForm.typeField,
        productField: this.searchForm.productField == null ? '' : this.searchForm.productField.id,
        search: this.searchForm.search,
        page: this.page,
        pagesize: this.pageSize
      }).then(rep => {
        this.tableData = rep.data.data
        this.total = rep.data.total
      })
    },
    resetForm() {
      this.searchForm.productField = null
      this.searchForm.search = ''
      this.searchForm.typeField = ''
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.searchVul()
    },
    handleCurrentChange(val) {
      this.page = val
      this.searchVul()
    },
    closeDialog(){
      this.searchVul()
      this.vulDialogVisible = false
    },
    deleteVulFunc(item) {
      if (confirm("确定删除：" + item.name_zh + " ?")) {
        // 用户单击了“确认”按钮，执行删除操作
        deleteVul(item.id).then(res => {
          if (res.code == 0) {
            ElMessage.success('删除成功！')
            this.searchVul()
            return
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        // 用户单击了“取消”按钮，不执行删除操作
        // ...

      }
    },
    editVulFunc(item) {
      this.vulDialogVisible = true
      this.vulId = item.id
      console.log(this.vulId)
    },
    flagUpdate(newData){
      this.vulDialogVisible = newData
      console.log("this.vulDialogVisible::"+this.vulDialogVisible)
    },
  },
}
</script>

